<template>
  <div class="cart">
    <Header title="购物车" :edit="true"></Header>
    <CartDetail v-if="isShow" :changeShow="changeShow"></CartDetail>
    <Empty v-else></Empty>
    <Footer></Footer>
  </div>
</template>

<script setup>
import Header from '@/components/Header'
import Footer from "@/components/Footer";
import Empty from "@/components/Empty"
import CartDetail from "@/views/cart/components/CartDetail.vue";
import {useStore} from "vuex";
import {onMounted, ref} from "vue";

const isShow = ref(true)
const store = useStore()
const changeShow = () => {
  isShow.value = false
}
const init = () => {
  if(store.state.cartList.length  === 0){
    isShow.value = false
  }
}

onMounted(() => {
  init()
})
</script>

<style lang="less" scoped>
.cart {
  display: flex;
  flex-flow: column;
  height: 100%;
  .content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
